<template>
	<view>
		<scroll-view scroll-y='true' @scroll='scroll' class="proNavBox">
			<view>
				<uni-nav-bar fixed="true" statusBar="true" :backgroundColor="titleBgc">
					<template slot="right">
						<view class="navRight">
							<uni-icons type="cart" size="30"></uni-icons>
						</view>
					</template>
					<template slot="left">
						<navigator open-type="navigateBack">
							<uni-icons type="arrowleft" size="30"></uni-icons>
						</navigator>
					</template>
				</uni-nav-bar>
				<view class="proNavSwiperBox">
					<swiper class="swiper productSwiper" :style="{'position':position}">
						<swiper-item>
							<image src="../../../static/image/tj/bgc.png" class="productPlayImg" mode="aspectFill"></image>
						</swiper-item>
						<swiper-item>
							<image src="../../../static/image/tj/boybanner1.png" class="productPlayImg" mode="aspectFill"></image>
						</swiper-item>
						<swiper-item>
							<image src="/static/image/tj/boybanner2.png" class="productPlayImg" mode="aspectFill"></image>
						</swiper-item>
					</swiper>
					<!-- 张数 -->
					<view class="proNavZhangsu">1/5</view>
					<!-- 图片和视频 -->
					<view class="proNavImgAndRadio">
						<view>
							<!-- <text class="iconfont productPlayIcon">&#xe60f;</text> -->
							视频
						</view>
						<view>图片</view>
					</view>
				</view>
			</view>

			<view class="proDuctXiamian">
				<view class="padding30 fontsize30 proShangpingTitle">
					<view>彰显个性美不规则的花纹加滚珠边的元素优雅大方</view>
					<view class="productShiyin">宽松版型|薄款|春季使用</view>
					<view class="proPrice">
						<text class="proPriceSmallFont">￥</text>
						<text class="proPriceBigFont">109.00</text>
					</view>
					<view class="flex proManJian">
						<view>满120减20</view>
						<view>包邮</view>
					</view>
				</view>
				<!-- 评论 -->
				<view class="padding30">
					<view class="flexjustify">
						<loveTitle>评论</loveTitle>
						<view class="productMore">更多>></view>
					</view>
					<view>
						<view class="flex proMargintop">
							<navigator url="/pages/store/storeImpression/storeImpression" hover-class="none">
								<avatar width="100" height="100" src="../../../static/image/tj/bgc.png" bgc="#fff"></avatar>
							</navigator>
							<view class="proPinlunMan">
								<view class="fontsize28 proName">于文文</view>
								<view class="profubiaoti">男士卫衣|浅绿色</view>
							</view>
						</view>
						<view class="fontsize28 proPinglunFont">
							这个衣服非常漂亮呢
						</view>
						<view>
							<image src="/static/image/tj/boybanner1.png" mode="aspectFill" class="proPinglunImg"></image>
							<image src="/static/image/tj/boybanner1.png" mode="aspectFill" class="proPinglunImg"></image>
							<image src="/static/image/tj/boybanner1.png" mode="aspectFill" class="proPinglunImg"></image>
						</view>
					</view>
				</view>
				<view>
					<view class="proDetailTitle">
						<span class="line"></span>
						<span class="proDetail">宝贝详情</span>
						<span class="line"></span>
					</view>
					<image src="/static/image/tj/boybanner2.png" class="proDetailImg" mode="aspectFill"></image>
				</view>
			</view>

		</scroll-view>
		<view class="proBottomBtn">
			<view class="proBottomIcons">
				<uni-icons type="shop" size="30"></uni-icons>
				<uni-icons type="headphones" size="30"></uni-icons>
				<uni-icons type="cart" size="30"></uni-icons>
			</view>
			<view class="flex proBtn">
				<navigator url="/pages/store/shopChart/shopChart" hover-class="none" class="" @click="open">加入购物车</navigator>
				<view class="proBtnLJgoum" @click="open">立即购买</view>
			</view>
		</view>
		<uni-popup type="bottom" class="uniPopup" ref="popup1">
			<view class="productCanshuBox">
				<view class="flex">
					<image class="proCanshuImg" src="/static/image/tj/boybanner1.png" mode="aspectFill"></image>
					<view>
						<view class="proCanshuPrice">
							<text class="proCanshuYaya">￥</text>
							<text>109.00</text>
						</view>
						<view class="productKuchun">库存1564件</view>
						<view class="proSelColeor">选择 主要颜色，型号</view>
					</view>
				</view>
				<view class="fontsize30 productMiaosu">彰显个性美不规则的花纹加滚珠边的元素优雅大方</view>
				<view class="guige">
					<view class="fontsize28 proSmalltitileFont">颜色</view>
					<view>
						<view class="proItemLable">黄色</view>
						<view class="proItemLable">黄色</view>
						<view class="proItemLable">黄色</view>
						<view class="proItemLable">黄色</view>
						<view class="proItemLable">黄色</view>
						<view class="proItemLable">黄色</view>
						<view class="proItemLable">黄色</view>
					</view>
				</view>
				<view class="guige">
					<view class="fontsize28 proSmalltitileFont">规格</view>
					<view>
						<view class="proItemLable">黄色</view>
						<view class="proItemLable">黄色</view>
						<view class="proItemLable">黄色</view>
						<view class="proItemLable">黄色</view>
					</view>
				</view>
				<view class="flexjustify">
					<view class="proSmalltitileFont">购买数量</view>
					<uni-number-box @change="change"></uni-number-box>
				</view>
				<view class="productComfire">
					确认
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import avatar from '@/components/avatar/avater.vue'
	import loveTitle from '@/components/loveTitle/loveTitle.vue'
	export default {
		components: {
			avatar,
			loveTitle
		},
		data() {
			return {
				titleBgc: 'rgba(255,255,255,0)',
				position: 'fixed',

			}
		},
		methods: {
			change: function() {

			},
			scroll: function(e) {
				this.titleBgc = 'rgb(255,255,255)';
				this.position = 'relative'
				if (e.detail.scrollTop < 10) {
					this.titleBgc = 'rgba(255,255,255,0)';
					this.position = 'fixed'
				}
			},
			open: function() {
				this.$refs.popup1.open()
			},
		}
	}
</script>

<style>
	.productComfire {
		width: 100vw;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		color: #FFFFFF;
		background-color: #000000;
		margin-top: 50rpx;
		margin-left: -20rpx;
		margin-right: -20rpx;
		margin-bottom: -60rpx;
	}

	.guige {
		margin: 30rpx 0;
		border-bottom: 1px solid #F8F8F8;
		padding-bottom: 40rpx;
	}

	.proItemLable {
		display: inline-block;
		background-color: #E6E5E5;
		font-size: 26rpx;
		padding: 0 20rpx;
		border-radius: 10rpx;
		margin: 30rpx 32rpx 0 0;
	}

	.proSmalltitileFont {
		font-size: 26rpx;
		font-weight: bold;
	}

	.productMiaosu {
		padding: 30rpx 0 20rpx 0;
	}

	.proSelColeor {
		font-size: 26rpx;
	}

	.productKuchun {
		font-size: 25rpx;
		color: #ABABAB;
		margin: 10rpx 0rpx;
	}

	.proCanshuYaya {
		font-size: 27rpx;
		font-weight: normal;
	}

	.proCanshuPrice {
		color: #1676FE;
		font-weight: bold;
	}

	.proCanshuImg {
		width: 200rpx;
		height: 200rpx;
		margin-right: 20rpx;
	}

	.productCanshuBox {
		background-color: #fff;
		padding: 30px 20rpx;
	}

	.uniPopup {
		z-index: 1000;
	}

	.proBtn {
		display: flex;
		justify-content: space-between;
		width: 52vw;
		text-align: center;
		font-size: 35rpx;
		border: 1px solid #1676FE;
		/* border: 1px solid #1676FE; */
		text-align: center;
	}

	.proBtnLJgoum {
		color: #FFFFFF;
		background-color: #1676FE;
	}

	.proBtn>view,
	.proBtn>navigator {
		font-size: 30rpx;
		width: 50%;
		line-height: 80rpx;
	}

	.proBottomIcons {
		width: 35vw;
		margin-right: 30rpx;
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
	}

	.proBottomBtn {
		padding: 20rpx;
		width: 100vw;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		height: 120rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 300;
		background-color: #FFFFFF;
		line-height: 90rpx;
	}

	.navRight {
		width: 100%;
		text-align: right;
	}

	.productSwiper {
		/* position: fixed; */
		left: 0;
		top: 0;
		width: 100vw !important;
		height: 600rpx;
	}

	.productPlayImg {
		width: 100%;
		height: 100%;
	}

	.proNavSwiperBox {
		position: relative;
		width: 100vw;
		height: 510rpx;
	}

	.proNavZhangsu {
		position: absolute;
		width: 70rpx;
		height: 40rpx;
		background-color: #FFFFFF;
		border: 1px solid #1676FE;
		font-size: 25rpx;
		text-align: center;
		right: 30rpx;
		bottom: 40rpx;
		border-radius: 10rpx;
	}

	.proNavImgAndRadio {
		font-size: 27rpx;
		position: absolute;
		bottom: 40rpx;
		left: 50%;
		transform: translateX(-50%);
		display: flex;
	}

	.proNavImgAndRadio>view {
		width: 100rpx;
		text-align: center;
	}

	.proNavImgAndRadio>view:nth-child(1) {
		background-color: #fff;
		border-top-left-radius: 10rpx;
		border-bottom-left-radius: 10rpx;
	}

	.proNavImgAndRadio>view:nth-child(2) {
		background-color: #1676FE;
		color: #FFFFFF;
		border-top-right-radius: 10rpx;
		border-bottom-right-radius: 10rpx;
	}

	.productPlayIcon {
		font-size: 20rpx;
	}

	.proNavShare {
		font-size: 50rpx;
		margin-right: 10rpx;
	}

	.productShiyin {
		font-size: 25rpx;
		margin: 10rpx 0;
	}

	.proPrice {
		color: #1676FE;
	}

	.proPriceBigFont {
		font-size: 40rpx;
		font-weight: bold;
	}

	.proPriceSmallFont {
		font-size: 25rpx;
	}

	.proManJian {
		color: #1676FE;
		font-size: 25rpx;
	}

	.proManJian>view {
		border: 1px solid #1676FE;
		margin-left: 20rpx;
		padding: 0 15rpx;
		margin-top: 20rpx;
		border-radius: 10rpx;
	}

	.proShangpingTitle {
		border: 5px solid #F8F8F8;
	}

	.productMore {
		font-size: 25rpx;
		color: #8D8D8D;
	}

	.profubiaoti {
		font-size: 20rpx;
		color: #6D6D6D;
	}

	.proName {
		font-weight: bold;
	}

	.proPinlunMan {
		margin-top: 15rpx;
		margin-left: 10rpx;
	}

	.proMargintop {
		margin-top: 20rpx;
	}

	.proPinglunImg {
		width: 200rpx;
		height: 250rpx;
		border-radius: 10rpx;
		margin-right: 30rpx;
		margin-top: 20rpx;
	}

	.proPinglunFont {
		font-size: 27rpx;
		line-height: 50rpx;
	}

	.line {
		display: inline-block;
		width: 50rpx;
		border-top: 3px solid #68EDF2;
		vertical-align: 5px;
	}

	.proDetail {
		color: #1676FE;
		margin: 0 30rpx;
		font-weight: bold;
	}

	.proDetailTitle {
		text-align: center;
		margin-top: 50rpx;
		margin-bottom: 30rpx;
	}

	.proDetailImg {
		width: 100vw;
		height: 140vw;
	}

	.proDuctXiamian {
		position: relative;
		z-index: 100;
		background-color: #fff;
	}

	.proNavBox {
		height: 100vh;
	}
</style>
